<template>
	<view class="page_container">
		<navBar>浏览历史</navBar>
		<view class="content_container">
			<view class="articles_container">
				<mescroll :up="upOption" :down="downOption" @down="downCallback" @up="upCallback" @init="mescrollInit" @scroll="scrollPause">
					<general-card v-for="(item, index) in articleArry" :key="index" :tltle="item.author.nickname" :avatar="item.author.avatar_url" :note="item.create_time">
						<view class="title" @click="go_articles_details(item)">
							<text>{{ item.content }}</text>
						</view>
						<view class="close" slot="header_right_extend"><text class="iconfont icon-guanbi" @click="removeSlef"></text></view>
						<view class="medias" slot="body_extend" v-if="item.files[0]">
							<single-media
								class="width100"
								v-if="item.files.length < 2"
								:isImage="item.files[0].file_type === 0"
								:file="item.files[0]"
								maxWidth="450"
								@playVideo.stop="playVideo"
							/>
							<media-scratchable-latex class="width100" v-else :files="item.files" :width="670" space="4" />
						</view>
						<GeneralThumbUp
							slot="foot_left_extend"
							class="width100"
							@likeClick="likeClick"
							:like_status="item.like_status"
							:likes="item.likes"
							:index="index"
						></GeneralThumbUp>
						<view class="right_action" slot="foot_right_extend">
							<view class="iconfont icon-daipingjia" @click="go_articles_details(item)">
								<text style="font-size: 28rpx;">{{ item.comments }}</text>
							</view>
							<text class="iconfont icon-shoucang"></text>
							<button class="btn" :id="index" open-type="share"><text class="iconfont icon-fenxiang"></text></button>
						</view>
					</general-card>
				</mescroll>
			</view>
		</view>
	</view>
</template>

<script>
import { throttle } from '../../utils/DebouchAndThrottl.js';
import navBar from '../../components/zhouWei-navBar/index.vue';
import mescroll from '../../components/mescroll-uni/mescroll-uni.vue';
import GeneralCard from '../../components/commonComponent/GeneralCard.vue';
import GeneralThumbUp from '../../components/commonComponent/GeneralThumbUp.vue';
import mediaScratchableLatex from '../../components/mediaComponents/mediaScratchableLatex.vue';
import singleMedia from '../../components/mediaComponents/singleMedia.vue';
export default {
	components: {
		navBar,
		mescroll,
		GeneralCard,
		GeneralThumbUp,
		mediaScratchableLatex,
		singleMedia
	},
	data() {
		return {
			data: {},
			index: 0,
			articleArry: [],
			mescroll: null,
			upOption: {
				onScroll: true,
				use: true, // 是否启用上拉加载; 默认true
				isBounce: true, // 开启浏览器touchmove事件
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				offset: 500, //距离底部还有200px时开始加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				textLoading: '加载中...',
				textNoMore: '没有更多帖子了，去发布一个吧'
			},
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
			}
		};
	},
	onShareAppMessage(res) {
		let index;
		if (res.from === 'button') {
			// 来自页面内分享按钮
			index = parseInt(res.target.id);
		}
		let title = '笑死我了，赶快来看看';
		let url = '/pages/index/articleDetails?aid=' + this.articleArry[index].pk;
		return {
			title: title,
			path: url
		};
	},
	methods: {
		mescrollInit(mescroll) {
			// 初始化mescroll时的动作
			this.mescroll = mescroll;
		},
		downCallback(mescroll) {
			// 发生下拉刷新事件直接调用upCallback事件，并mescroll.num == 0
			mescroll.resetUpScroll();
		},
		upCallback(mescroll) {
			//上滑加载
			let pageNum = mescroll.num;
			let pageSize = mescroll.size;
			let length = this.$store.state.articleCache.browsingHistory.length;

			if (length == 0) {
				mescroll.endSuccess(length, false);
				return;
			}
			if (length > pageNum * pageSize - pageSize) {
				if (length - pageNum * pageSize > 10) {
					this.articleArry = this.articleArry.concat(this.$store.state.articleCache.browsingHistory.slice(pageNum * pageSize - pageSize, pageNum * pageSize + 1));
					mescroll.endSuccess(length, true);
				} else {
					this.articleArry = this.articleArry.concat(this.$store.state.articleCache.browsingHistory.slice(pageNum * pageSize - pageSize, length + 1));
					mescroll.endSuccess(length, false);
				}
				return;
			} else {
				mescroll.endSuccess(length, false);
			}
		},
		go_articles_details: throttle(function(item) {
			// 去详情界面
			uni.navigateTo({
				url: '../index/articleDetails?data=' + encodeURIComponent(JSON.stringify(item))
			});
		}, 1000),
		likeClick: throttle(function(like_type, index) {
			if (!this.$store.state.login.isLogin) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				uni.switchTab({
					url: '../user/index'
				});
				return;
			}
			this.$http
				.request({
					url: '/api/article/action/',
					method: 'post',
					data: {
						aid: this.articleArry[index].pk,
						like_type: like_type,
						action: 'add_like'
					}
				})
				.then(res => {
					this.articleArry[index].like_status = res.data.result;
					if (this.articleArry[index].like_status.up) {
						this.articleArry[index].likes++;
					} else {
						this.articleArry[index].likes--;
					}
				});
		}, 1000),
		playVideo(videoContext) {
			// 点击播放视频后的事件
			this.palyStatus = true; //设置播放状态
			if (!this.videoContext) {
				// 没有播放的话 直接设置视频控制上下文
				this.videoContext = videoContext;
			}
			if (this.videoContext != videoContext) {
				// 先暂停上一个再播放本次的
				this.videoContext.pause();
				this.videoContext = videoContext;
			}
		},
		scrollPause: throttle(function(mescroll) {
			// 列表滑动事件, 停止播放 防止可视区域超过视频了还在播放
			if (this.videoContext) {
				let nowScrollTop = mescroll.scrollTop - this.oldScrollTop;
				console.log(mescroll, '本次移动' + nowScrollTop);
				if (this.palyStatus && !(nowScrollTop < -50 || nowScrollTop < 50)) {
					this.videoContext.pause();
					this.palyStatus = false;
				}
				this.oldScrollTop = mescroll.scrollTop;
			}
		}, 250)
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.page_container {
	width: 100%;
	height: 100%;
	flex-wrap: wrap;

	.content_container {
		width: 100%;
		margin-top: 136rpx;
		flex-wrap: wrap;
		justify-content: flex-start;

		.articles_container {
			width: 100%;
			height: calc(100% - 70rpx);
			position: relative;
			background-color: #f5f5f5;

			general-card {
				width: 100%;
				flex-wrap: wrap;
				margin-bottom: 10rpx;

				.title {
					width: 100%;
					flex-wrap: wrap;
					margin-bottom: 15rpx;
				}

				.close {
					height: 100%;
					align-items: center;
				}

				.medias {
					width: 100%;
				}

				.good_comments {
					width: 100%;
				}

				.left_action {
					height: 55rpx;
					border-radius: 50rpx;
					background-color: #139dfe;

					.after_action {
						height: 100%;
						align-items: center;
						padding: 0 20rpx;

						.icon-up,
						.icon-down {
							font-size: 38rpx;
							font-weight: 600;
							color: white;
						}

						.up_text {
							font-size: 30rpx;
							color: white;
						}
					}

					.before_action {
						height: 100%;
						align-items: center;

						.up {
							height: 100%;
							align-items: center;
							margin-left: 10rpx;

							.icon-up {
								font-size: 38rpx;
								font-weight: 600;
								color: white;
							}

							.up_text {
								font-size: 30rpx;
								color: white;
							}
						}

						.hrs {
							height: 55%;
							border-left: 1rpx #fff solid;
							margin: 0 10rpx;
						}

						.down {
							padding-right: 10rpx;
							align-items: center;
							justify-content: center;

							.icon-down {
								font-size: 38rpx;
								font-weight: 600;
								color: white;
							}
						}
					}
				}

				.right_action {
					width: 265rpx;
					justify-content: space-around;
					align-items: center;

					button::after {
						border: none;
					}

					button {
						padding: 0 !important;
						margin: 0 !important;
						width: 65rpx;
						// height: 50rpx;
						line-height: 50rpx;
						font-size: 50rpx;
						background-color: #fff;
					}

					.icon-shoucang,
					.icon-daipingjia {
						font-size: 40rpx;
					}

					.icon-shoucang:active,
					.icon-daipingjia:active {
						color: #555555;
					}
				}
			}
		}
	}
}

// Mescroll CSS
.mescroll-uni-content .mescroll-downwarp {
	text-align: center;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.downwarp-content {
	justify-content: center;
}

.mescroll-upwarp {
	text-align: center;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-top: 0rpx !important;
}

.mescroll-uni-content {
	flex-wrap: wrap;
}

.mescroll-empty {
	flex-wrap: wrap;
	justify-content: center;
}

.mescroll-uni-fixed {
	top: 136rpx !important;
}

.empty-tip {
	width: 100%;
	flex-shrink: 0;
	justify-content: center;
}

.content {
	height: 100%;
}
</style>
